<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="模具编号">
        <el-input v-model="queryParams.moldNo"></el-input>
      </el-form-item>
      <el-form-item label="模具名称">
        <el-input v-model="queryParams.moldName"></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-tooltip placement="top">
      <div slot="content">点击任意一行列，即可在下方查看单价信息记录</div>
      <el-table  :data="moldList" border  @row-click="handleRowClick"  :row-class-name="rowClassName" >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column align="center" prop="moldNo" label="模具编号" />
        <el-table-column align="center" prop="moldName" label="模具名称" />
        <el-table-column align="center" prop="standardWeight" label="标准克重" />
        <el-table-column align="center" prop="pieceNum" label="出数" />
        <!-- <el-table-column label="操作" align="center" width="150px" fixed="right" v-if="true"></el-table-column> -->
      </el-table>
    </el-tooltip>
    
     <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" />
      
       <el-tabs v-model="activeName" @tab-click="handleClick" v-if="showCard">
          <el-tab-pane name="first" label="注塑">
              <el-row>
              <el-col :span="12">
                <el-button type="primary" size="small" @click="handleSave">保存</el-button>
              </el-col>
            </el-row>
            <el-form :model="moldedPriceForm" ref="moldedPriceForm" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="标准定额" prop="standardPrice">
                    <el-input v-model="moldedPriceForm.standardPrice" @input="calculatePiecePrice" placeholder="请输入标准定额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标准工资" prop="standardSalary">
                    <el-input v-model="moldedPriceForm.standardSalary" @input="calculatePiecePrice" placeholder="请输入标准工资"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计件单价" prop="piecePrice">
                    <el-input v-model="moldedPriceForm.piecePrice"  placeholder="请输入计件单价" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="second" label="印花">
            <el-row>
              <el-col :span="1.5">
                <el-button type="primary" size="small" @click="handleSave">保存</el-button>
              </el-col>
            </el-row>
            <el-form :model="stampPriceForm" ref="stampPriceForm" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="标准定额" prop="stampStandardQuota">
                    <el-input v-model="stampPriceForm.stampStandardQuota" @input="calculateStampPiecePrice" placeholder="请输入标准定额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标准工资" prop="stampStandardSalary">
                    <el-input v-model="stampPriceForm.stampStandardSalary" @input="calculateStampPiecePrice" placeholder="请输入标准工资"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                   <el-form-item label="计件单价" prop="StampUnitPrice">
                    <el-input v-model="stampPriceForm.StampUnitPrice" placeholder="请输入计件单价"></el-input>
                   </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="third" label="超声波焊接">
            <el-row>
              <el-col :span="1.5">
                <el-button type="primary" size="small" @click="handleSave">保存</el-button>
              </el-col>
            </el-row>
            <el-form :model="ultrasonicWeldingForm" ref="ultrasonicWeldingForm" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="标准定额" prop="UWstandardQuota">
                    <el-input v-model="ultrasonicWeldingForm.UWstandardQuota" @input="calculateUWPiecePrice" placeholder="请输入标准定额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标准工资" prop="UWStandardSalary">
                    <el-input v-model="ultrasonicWeldingForm.UWStandardSalary" @input="calculateUWPiecePrice" placeholder="请输入标准工资"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计件单价" prop="UWUnitPrice">
                    <el-input v-model="ultrasonicWeldingForm.UWUnitPrice" placeholder="请输入计件单价"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="fourth" label="包装">
            <el-row>
              <el-col :span="1.5">
                <el-button type="primary" size="small" @click="handleSave">保存</el-button>
              </el-col>
            </el-row>
            <el-form :model="wrapForm" ref="wrapForm" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="标准定额" prop="UWstandardQuota">
                    <el-input v-model="wrapForm.wrapstandardQuota" @input="calculateWrapPiecePrice" placeholder="请输入标准定额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标准工资" prop="UWStandardSalary">
                    <el-input v-model="wrapForm.wrapStandardSalary" @input="calculateWrapPiecePrice" placeholder="请输入标准工资"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计件单价" prop="UWUnitPrice">
                    <el-input v-model="wrapForm.wrapUnitPrice" placeholder="请输入计件单价"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
    
  </div>
</template>

<script>

export default {
  name: 'SalarySetting',
  data() {
    return {
      moldList: [
        {
          pieceNum: 1,
          moldNo: 'MYL021608',
          moldName: '圆盘',
          standardWeight: 13
        },{
          pieceNum:4,
          moldNo: 'MYL021610',
          moldName: '碟',
          standardWeight: 9
        },{
          pieceNum:6,
          moldNo: 'MYL0229098',
          moldName: '四方碟',
          standardWeight: 18
        }
      ],
      ids: [],
      single: false,
      multiple: false,
      showSearch: true,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        moldNo: '',
        moldName: '',
      },
      total: 0,
      showCard:true,
      activeName: 'first',
      
      moldedPriceForm: {},
      stampPriceForm: {},
      ultrasonicWeldingForm: {},
      wrapForm: {},
      
      moldNo: '',
      // 高亮行
      moldflag: true,
      moldPriceList: [
        {
          material: 'A5',
          technique: '单色内压花罩光',
          mold: '2',
          standardPrice: 1000,
          standardSalary: 58000,
          piecePrice: 58,
        },
        {
          material: 'A1',
          technique: '单色内压花罩光',
          mold: '2',
          standardPrice: 2000,
          standardSalary: 10000,
          piecePrice: 5,
        },
        {
          material: 'A5',
          technique: '单色内压花罩光',
          mold: '4',
          standardPrice: 1000,
          standardSalary: 5800,
          piecePrice: 5.8,
        },{
          material: 'A1',
          technique: '单色内压花罩光',
          mold: '4',
          standardPrice: 200,
          standardSalary: 15000,
          piecePrice: 75,
        }
      ],
      
    }
  },
  methods: {
    handleClick(tab, event) {
     console.log(tab, event);
     this.activeName = tab.name;
   },
   showMoldPrice(row){
    this.moldedPriceForm = row;
   },
    getList(){},
    handleQuery(){},
    resetQuery(){},
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    handleUpdate(row){},
    handleDelete(row){},
    calculatePiecePrice() {
    // 确保 standardPrice 和 standardSalary 是数字
    let standardPrice = Number(this.moldedPriceForm.standardPrice) || 0;
    let standardSalary = Number(this.moldedPriceForm.standardSalary) || 0;
 
    // 避免除以零的错误
    if (standardSalary === 0) {
      this.moldedPriceForm.piecePrice = 0;
      console.warn('标准工资不能为零');
    } else {
      this.moldedPriceForm.piecePrice = standardSalary / standardPrice;
    }
  },
  calculateStampPiecePrice(){
    let stampStandardQuota = Number(this.stampPriceForm.stampStandardQuota) || 0;
    let stampStandardSalary = Number(this.stampPriceForm.stampStandardSalary) || 0;
    if (stampStandardSalary === 0) {
      this.stampPriceForm.StampUnitPrice = 0;
      console.warn('标准工资不能为零');
    } else {
      this.stampPriceForm.StampUnitPrice = stampStandardSalary / stampStandardQuota;
    }
  },
  calculateUWPiecePrice(){
    let UWstandardQuota = Number(this.ultrasonicWeldingForm.UWstandardQuota) || 0;
    let UWStandardSalary = Number(this.ultrasonicWeldingForm.UWStandardSalary) || 0;
    if (UWStandardSalary === 0) {
      this.ultrasonicWeldingForm.UWUnitPrice = 0;
      console.warn('标准工资不能为零');
    } else {
      this.ultrasonicWeldingForm.UWUnitPrice = UWStandardSalary / UWstandardQuota;
    }
  },
  calculateWrapPiecePrice(){
    let wrapStandardQuota = Number(this.wrapForm.wrapstandardQuota) || 0;
    let wrapStandardSalary = Number(this.wrapForm.wrapStandardSalary) || 0;
    if (wrapStandardSalary === 0) {
      this.wrapForm.wrapUnitPrice = 0;
      console.warn('标准工资不能为零');
    } else {
      this.wrapForm.wrapUnitPrice = wrapStandardSalary / wrapStandardQuota;
    }
  },
  handleSave() {
    if(this.activeName === 'first'){
      this.$refs['moldedPriceForm'].validate((valid) => {
        if (valid) {
          console.log(this.moldedPriceForm);
          this.$message.success('保存成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }else if(this.activeName ==='second'){
      this.$refs['stampPriceForm'].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }else if(this.activeName === 'third'){
      this.$refs['ultrasonicWeldingForm'].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    } else if(this.activeName === 'fourth'){
      this.$refs['wrapForm'].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  //显示高亮
  rowClassName({ row }) {
    return row.moldNo === this.moldNo ? 'selected-row' : ''; // 判断是否选中
  },
  handleRowClick(row){
    console.log(row);
    this.moldNo = row.moldNo;
    this.showCard = true;
  }
}
}
</script>

<style>
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
